<template>
	<div class="page-container">
		<!--工具栏-->
		<el-row>
			<div class="toolbar" style="float:left;padding-top:10px;padding-left:15px;">
				<el-form :inline="true" :model="filters" :size="size" ref="filters">
					<el-row>
						<el-form-item>
							<el-input v-model="filters.chineseName" clearable placeholder="商品名称"></el-input>
						</el-form-item>
						<el-form-item>
							<el-select v-model="filters.warehouseId" clearable placeholder="仓库名称">
								<el-option
										v-for="item in warehouseOptions"
										:key="item.id"
										:label="item.name"
										:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-select v-model="filters.brandId" clearable placeholder="商品品牌">
								<el-option
										v-for="item in brandOptions"
										:key="item.id"
										:label="item.name"
										:value="item.id">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<tree-select
									:options="categoryOptions"
									placeholder="商品类目"
									v-model="filters.categoryId"
									:normalizer="normalizer"
									style="width:230px"
							/>
						</el-form-item>
						<el-form-item>
							<el-select v-model="filters.productType" clearable placeholder="商品类型">
								<el-option
										v-for="item in typeOptions"
										:key="item.key"
										:label="item.value"
										:value="item.key">
								</el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-select v-model="filters.status" clearable placeholder="启用状态">
								<el-option
										v-for="item in statusOptions"
										:key="item.key"
										:label="item.value"
										:value="item.key">
								</el-option>
							</el-select>
						</el-form-item>
					</el-row>
					<!-- 查询  重置 -->
					<el-row>
						<el-form-item>
							<kt-button icon="fa fa-search" :label="$t('action.search')" type="primary" @click="findPage(null)"/>
						</el-form-item>
						<el-form-item>
							<kt-button icon="fa fa-refresh" :label="$t('action.reset')" type="primary" @click="resetForm('filters')"/>
						</el-form-item>
					</el-row>
				</el-form>
			</div>
			<div class="toolbar" style="float:right;padding-top:10px;padding-right:15px;">
				<!--表格显示列界面-->
				<table-column-filter-dialog ref="tableColumnFilterDialog" :columns="columns" @handleFilterColumns="handleFilterColumns"></table-column-filter-dialog>
			</div>
		</el-row>
		<!--    <el-row :gutter="85">-->
		<!--      <el-col align="left" :span="1">-->
		<!--        <el-dropdown trigger="click">-->
		<!--          <el-button size="mini" type="primary">批量操作</el-button>-->
		<!--          <el-dropdown-menu slot="dropdown">-->
		<!--            <el-dropdown-item class="clearfix">-->
		<!--              批量启用<el-badge class="mark"/>-->
		<!--            </el-dropdown-item>-->
		<!--            <el-dropdown-item class="clearfix">-->
		<!--              批量禁用<el-badge class="mark"/>-->
		<!--            </el-dropdown-item>-->
		<!--          </el-dropdown-menu>-->
		<!--        </el-dropdown>-->
		<!--      </el-col>-->
		<!--      <el-col align="left" :span="1">-->
		<!--        <el-button size="mini" type="primary">查看任务</el-button>-->
		<!--      </el-col>-->
		<!--      <el-col align="left" :span="1">-->
		<!--        <el-button size="mini" type="primary">导出</el-button>-->
		<!--      </el-col>-->
		<!--    </el-row>-->
		<el-row style="margin-top: 5px;">
			<cy-table
					:height="350"
					:content="pageResult"
					:totalSize="totalSize"
					:columns="filterColumns"
					:showBatchDelete="false"
					:showBatchReview="false"
					:showDeleteOperation="false"
					:showEditOperation="true"
					@findPage="findPage"
					@handleEdit="handleEditFunction"
					:btnList="btnList"
					@updateProductInfo="updateProductInfo"
					ref="CyTable">
			</cy-table>
		</el-row>
		
		<!--仓库商品列表弹窗界面-->
		<el-dialog title="仓库商品列表" top="7vh" width="70%" :visible.sync="editDialogVisible" :close-on-click-modal="false">
			<el-form label-position="right" :inline="true" :size="size" label-width="100px"
			         :model="dataForm" ref="dataForm" :rules="dataFormRules">
				<el-form-item label="ID" prop="id" v-if="false">
					<el-input
							v-model="dataForm.id"
							:disabled="true"
							auto-complete="off"
					></el-input>
				</el-form-item>
				<el-row>
					<el-col :span="6">
						<el-form-item label="启用状态：">
							<el-radio-group v-model="dataForm.status" :disabled="true">
								<el-radio :label="1">启用</el-radio>
								<el-radio :label="2">禁用</el-radio>
							</el-radio-group>
						</el-form-item>
					</el-col>
				</el-row>
				<div style="margin-top: 0px; border-bottom: 1px dashed #c3c3c3"></div>
				<el-row style="margin-top: 20px">
					<el-col :span="6">
						<el-form-item label="仓库名称：">
							<el-input v-model="dataForm.warehouseName" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="商家名称：">
							<el-input v-model="dataForm.merchantName" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div style="margin-top: 5px; border-bottom: 1px dashed #c3c3c3"></div>
				<el-row style="margin-top: 10px;">
					<el-col :span="6">
						<el-form-item label="商品编码：">
							<el-input v-model="dataForm.productCode" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="商品名称：">
							<el-input v-model="dataForm.chineseName" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="规格属性：">
							<el-input v-model="dataForm.property" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row style="margin-top: 10px">
					<el-col :span="6">
						<el-form-item label="商品品牌：">
							<el-input v-model="dataForm.brandName" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="商品类目：">
							<el-input v-model="dataForm.categoryName" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="计量单位：">
							<el-input v-model="dataForm.unitName" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row style="margin-top: 10px">
					<el-col :span="6">
						<el-form-item label="商品条码：">
							<el-input v-model="dataForm.barCode" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="6">
						<el-form-item label="货号：">
							<el-input v-model="dataForm.artNo" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<div style="margin-top: 5px; border-bottom: 1px dashed #c3c3c3"></div>
				<el-row style="margin-top: 20px">
					<el-col :span="6">
						<el-form-item label="流转途径：" prop="transportWay">
							<el-select v-model="dataForm.transportWay" placeholder="请选择">
								<el-option
										v-for="item in options"
										:key="item.key"
										:label="item.value"
										:value="item.key">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div slot="footer" class="dialog-footer" style="text-align:center">
				<el-button :size="size" @click.native="editDialogVisible = false">{{$t('action.cancel')}}</el-button>
				<el-button :size="size" type="primary" @click.native="submitForm">{{$t('action.submit')}}</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
import CyTable from '@/views/Core/ProductTable'
import KtButton from '@/views/Core/KtButton'
import {format} from '@/utils/datetime'
import TableColumnFilterDialog from '@/views/Core/TableColumnFilterDialog'
import TreeSelect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import {param} from '../../../utils'

export default {
	components: {
		CyTable,
		KtButton,
		TableColumnFilterDialog,
		TreeSelect
	},

	data() {
		return {
			categoryOptions: [],
			brandOptions: [],
			warehouseOptions: [],
			options: [{
				key: 1,
				value: '配送'
			}, {
				key: 2,
				value: '直送'
			}, {
				key: 3,
				value: '直通'
			}],
			typeOptions: [
				{
					key: 1,
					value: '常规商品'
				}, {
					key: 31,
					value: '称重商品'
				}],
			statusOptions: [
				{
					key: 1,
					value: '启用'
				}, {
					key: 2,
					value: '禁用'
				}],
			size: 'small',
			filters: {
				warehouseId: '',
				chineseName: '',
				brandId: '',
				categoryId: null,
				productType: '',
				status: ''
			},
			btnList: [{
				'customLabel': '启用',
				'isShowMethod': 2,
				'method': 'updateProductInfo'
			}, {
				'customLabel': '禁用',
				'isShowMethod': 1,
				'method': 'updateProductInfo'
			}],
			totalCount: 0,
			columns: [
				{prop: 'pictureUrl', label: '主图', minWidth: 120, showImg: true},
				{prop: 'chineseName', label: '商品名称', minWidth: 120},
				// { prop: "code", label: "商家编码", minWidth: 120 },
				// { prop: "stock", label: "总库存", minWidth: 120 },
				{prop: 'price', label: '售价', minWidth: 120},
				{prop: 'brandName', label: '商品品牌', minWidth: 120},
				{prop: 'categoryName', label: '商品类目', minWidth: 120},
				{prop: 'status', label: '启用状态', minWidth: 120, formatter: this.formatStatus},
				{prop: 'productType', label: '商品类型', minWidth: 120, formatter: this.formatType},
				{prop: 'merchantName', label: '商家', minWidth: 120},
				{prop: 'warehouseName', label: '仓库', minWidth: 120},
			],
			dataFormRules: {
				methodType: [{required: true, message: '请输入流转途径', trigger: 'blur'}],
			},
			dataForm: {
				id: '',
				transportWay: '',
			},
			filterColumns: [],
			totalSize: 0,
			pageRequest: {pageNum: 1, pageSize: 10},
			pageResult: [],
			operation: false, // true:新增, false:编辑
			editDialogVisible: false, // 新增编辑界面是否显示
		}
	},

	methods: {
		// 获取分页数据
		findPage: function (params) {
			let this_ = this
			if (params == undefined || params == null) {
				params = {
					pageNum: this_.pageRequest.pageNum,
					pageSize: this_.pageRequest.pageSize
				}
			}
			if (this_.filters == undefined || this_.filters == null) {
				this_.filters = {}
			}
			this_.filters.start = params.pageNum
			this_.filters.limit = params.pageSize
			this.utils.request.queryWarehouseProductRelation(this_.filters, function (res) {
				if (res.data.rows == null) {
					res.data.rows = []
				}
				this_.pageResult = res.data.rows
				this_.totalSize = Number(res.data.total)
			})
		},
		// 清空文本值
		resetForm(formName) {
			this.filters = {
				warehouseId: '',
				chineseName: '',
				brandId: '',
				categoryId: null,
				productType: '',
				status: ''
			}
			this.findPage()
		},
		// 编辑
		handleEditFunction(params) {
			this.dataForm = Object.assign({}, params.row)
			this.operation = false
			this.editDialogVisible = true
		},
		// 启用
		handleCustom(value) {
			this.checkDialogVisible = true
			this.$message({
				message: '操作成功',
				type: 'success'
			})
		},
		// 提交审核
		submitForm: function () {
			this.$refs.dataForm.validate(valid => {
				if (valid) {
					let this_ = this
					this.$confirm('确认提交吗？', '提示', {}).then(() => {
						this.editLoading = true
						let params = {}
						params.transportWay = this_.dataForm.transportWay
						params.id = this_.dataForm.id
						this.utils.request.editTransportWay(params, this.editInfoBack)
					})
				}
			})
		},
		// 新增修改回调
		editInfoBack: function (data) {
			if (data.code == '0000') {
				this.$message({message: '操作成功', type: 'success'})
				this.findPage()
				this.editDialogVisible = false
			} else {
				this.$message({message: '操作失败, ' + data.msg, type: 'error'})
			}
		},
		// 处理表格列过滤显示
		displayFilterColumnsDialog: function () {
			this.$refs.tableColumnFilterDialog.setDialogVisible(true)
		},
		// 处理表格列过滤显示
		handleFilterColumns: function (data) {
			this.filterColumns = data.filterColumns
			this.$refs.tableColumnFilterDialog.setDialogVisible(false)
		},
		// 处理表格列过滤显示
		initColumns: function () {
			var temp = []
			$.each(this.columns, function (key, val) {
				temp.push(val)
			})
			this.filterColumns = temp
		},

		formatStatus(row, column, cellValue, index) {
			if (cellValue === '0') {
				return '启用'
			} else {
				return '禁用'
			}
		},
		formatType: function (row, column, cellValue, index) {
			if (cellValue === '1') {
				return '实体商品'
			} else if (cellValue === '2') {
				return '虚拟商品'
			} else if (cellValue === '3') {
				return '虚拟组合'
			} else if (cellValue === '4') {
				return '实物组合'
			}
		},
		// 修改商品信息
		updateProductInfo: function (params) {
			if (params.row.status == 1) {
				let param = {
					status: 2,
					id: params.row.id
				}
				let this_ = this
				this.utils.request.editTransportWay(param, function (data) {
					if (data.code == '0000') {
						this_.$message({message: '操作成功', type: 'success'})
						this_.findPage(null)
					} else {
						this_.$message({message: '操作失败, ' + res.msg, type: 'error'})
					}
				})
			} else {
				let param = {
					status: 1,
					id: params.row.id
				}
				let this_ = this
				this.utils.request.editTransportWay(param, function (data) {
					if (data.code == '0000') {
						this_.$message({message: '操作成功', type: 'success'})
						this_.findPage(null)
					} else {
						this_.$message({message: '操作失败, ' + res.msg, type: 'error'})
					}
				})
			}
		},
		//仓库初始化
		queryWarehouse: function () {
			let params = {}
			let this_ = this
			this.utils.request.getMStoreList(params, function (res) {
				if (res.data) {
					this_.warehouseOptions = res.data
				}
			})
		},
		//商品品牌始化
		queryBrand: function () {
			let params = {}
			let this_ = this
			this.utils.request.queryPageProductBrand(params, function (res) {
				if (res.data.rows != null) {
					this_.brandOptions = res.data.rows
				}
			})
		},
		//主界面查询所有商品类目
		queryBehindCategory: function (data) {
			let params = {}
			let this_ = this
			this.utils.request.queryBehindCategory(params, function (data) {
				this_.categoryOptions = data.data
			})
		},

		normalizer(node) {
			if (node.categoryList == null || node.categoryList.length == 0) {
				delete node.categoryList
			}
			return {
				id: node.id,
				label: node.name,
				children: node.categoryList
			}
		},

		selecteCategory(param) {
			if (param.isFirstLevel == 0) {
				this.filters.isFirstLevel = 0
			} else if (param.isFirstLevel == 1) {
				this.filters.isFirstLevel = 1
			}
		},
	},

	mounted() {
		this.initColumns()
		this.queryWarehouse()
		this.queryBrand()
		this.queryBehindCategory()
	}
}
</script>

<style scoped>

</style>
